<template>
    <div class="login-container full">
        <el-card class="login-card">
            <h2 style="text-align:center;">图书管理系统登录</h2>
            <el-form :model="loginForm" :rules="rules" ref="formRef" label-width="80px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username" autocomplete="off" size="large" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" type="password" autocomplete="off" size="large" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onLogin" size="large"
                        style="width:100%;font-size:18px;height:48px;">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios';

const router = useRouter()
const loginForm = ref({ username: '', password: '' })
const formRef = ref()
const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
            pattern: /^[A-Z][a-zA-Z\d!@#$%^&*.]{7,}$/, // 大写字母开头，长度至少8位
            message: '密码需以大写字母开头，且长度至少8位', trigger: 'blur'
        }
    ]
}
const loginAttempts = ref(0)
const lockUntil = ref(null)

const onLogin = async () => {
    if (lockUntil.value && new Date() < lockUntil.value) {
        const left = Math.ceil((lockUntil.value - new Date()) / 60000)
        alert(`账号已锁定，请${left}分钟后再试`)
        return
    }
    formRef.value.validate(async valid => {
        if (valid) {
            try {
                const response = await axios.post('/auth/login', loginForm.value);
                const token = response.data.token;
                localStorage.setItem('token', token);
                loginAttempts.value = 0
                lockUntil.value = null
                router.push('/home');
            } catch (error) {
                loginAttempts.value++
                if (loginAttempts.value >= 3) {
                    lockUntil.value = new Date(Date.now() + 15 * 60 * 1000)
                    alert('登录失败次数过多，账号已锁定15分钟')
                } else {
                    alert(`登录失败，请检查用户名和密码（还可尝试${3 - loginAttempts.value}次）`)
                }
            }
        }
    });
};
</script>

<style scoped>
.login-container.full {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 渐变背景色 */
    background: linear-gradient(135deg, #a8c0ff 0%, #fbc2eb 100%);
    z-index: 1000;
}

.login-card {
    width: 520px;
    padding: 56px 40px 40px 40px;
    box-shadow: 0 8px 40px rgba(64, 158, 255, 0.18);
    border-radius: 20px;
    background: #fff;
    transition: width 0.2s, padding 0.2s;
}
</style>
